Se você já usou o bootstrap já deve ter apanhado com algumas funcionalidades que funcionam em uma versão do bootstrap mas não em outra. Eu mesmo costumo baixar o bootstrap para uma pasta local do servidor ao invés de usar o cdn ou coisa parecida para acessar os recursos do bootstrap. Assim eu garanto que funciona hoje e vai continuar funcionando até eu alterar o BootStrap. Mas as vezes e na pressa a gente atropela algumas coisas e parte que nos interessa fica funcionando e as que não interessam a gente ignora.
Importante : Para usar o recurso de botão dropdown a página usa o bootstrap
tanto o css como o js, o JQuery e o Popper. Contudo o popper só funcionou com CDN
e não funcionou localmente. Enquanto esse problema não for resolvido sugiro não
utilizar este recurso.
Copiei todo o popper (1.1 MB) para o site e mesmo assim não funcionou.
Este documento exibe os botões com finalidades especiais que emulam menus drop-down/up além dos efeitos
desabilitado e separadores, comuns nesses tipos de controles.
Para exibir os botões comuns clique no link a seguir BootStrap - Botões Comuns
A classe .dropdown é usada para indicar um menu dropdown, ou seja, um botão que ao ser clicado abre um conjunto de links com opções para o usuário selecionar.
Para abrir o dropdown menu utilize o botão ou link com a classe .dropdown-toggle e data-toggle="dropdown".
Como o browser exibe:
Código:
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Botão Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
A classe dropup faz o menu dropdown menu expandir para cima ao invés de para baixo:
Como o browser exibe:
Código:
<div class="dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Botão DropUP
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
A classe .active adiciona o cor de fundo azul indicando que o link é o ativo.
A classe .disabled desabilita o item dropdown e coloca o texto em cor cinza mas ainda é possível clicar nele.
Como o browser exibe:
Código:
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Botão Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Normal</a>
<a class="dropdown-item active" href="#">Ativo</a>
<a class="dropdown-item disabled" href="#">Inativo</a>
</div>
</div>
A classe .dropdown-divider é usada para separar os links dentro de um menu dropdown com uma linha fina horizontal :
Como o browser exibe:
Código:
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Botão Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Outro link</a>
</div>
</div>